<template>
	<view class="wrap">
		<view v-for="(item,index) in ResourceList" :key="index">
			<u-row gutter="16" justify="space-between">
				<u-col span="10">
					<view class="demo-layout log-unit">
						{{item.title}}
					</view>
				</u-col>
				<u-col span="2" class="discuss-btn">
					<view class="demo-layout">
						<!-- <u-button class="" type="primary" size="mini" @click.stop="kmsToPath(item)">评论</u-button> -->
					</view>
				</u-col>
			</u-row>
			<view class="kms-course-log">
				<view style="display: flex;margin-bottom: 15rpx;" justify="space-between" @click.stop="lookContent(item,logItem)" v-for="(logItem,logIndex) in item.files" :key="logIndex">
					<view>
						<view style="width: 48rpx;height: 48rpx;">
							<view class="status-round" :class="logItem.studyStatus === 2?'end-learn':(logItem.studyStatus === 1? 'learning':'not-learn')"></view>
						</view>
						<!-- <u-image width="48rpx" height="48rpx" :src="logItem.studyStatus === 2 ? '/static/img/study_end.png' : '/static/img/study_not.png'"></u-image> -->
					</view>
					<view style="width: 95%;">
						<view style="overflow: auto;position: relative;">
							<text class="log-title" :class="studying === logItem.fileId ?'log-title-studying':''">{{logItem.title}}</text>
							<view class="timeLong1">
								<text v-if="logItem.studiedSeconds != 0" style="color: #0066CC;">{{logItem.studiedToSeconds | file_time}}/</text>
								<text v-if="logItem.standardStudySeconds">{{logItem.standardStudySeconds | file_time}}</text>
							</view>
						</view>
						<view class="study-status">
							<view>
								<view class="timeLong">{{logItem.content}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
	    KmsResourceList,
		kmsCourseFileStudy
	} from '@/api/kms/course.js';
	import CourseVideo from './displayContent/video.vue'
	export default {
		data() {
			return {
				scrollTop: 0,
				fileUrl: '/upload/20200821/close.png',
				list: [{
					name: '简介'
				}, {
					name: '目录'
				}, {
					name: '评论'
				}],
				current: 1
			}
		},
		computed:{},
		components: {
		   CourseVideo
		},
		props: {
			courseId: Number,
			ResourceList:Array,
			studying: Number
		},
		watch:{},
		mounted() {
			// this.getResourceList(this.courseId, true)
		},
		methods:{
			lookContent(item,logtime) {//学习视频和文件
			console.log(' --->> 学习视频和文件');
				var fileType =logtime.path.substring(logtime.path.lastIndexOf(".")+1);
				let data = {
				    type: fileType,
				    resourceId: item.resourceId,
					courseId: this.courseId,
					logtime: logtime
				}
				console.log(data);
				this.$emit('value-change', data)
			},
			getResourceList(courseIds, first) {//获取资源的列表目录
			    let self = this;
			    let params = {
			        courseId:courseIds
			    }
			    KmsResourceList(params).then(res => {
					self.ResourceList = res.data.list
					let data = {
					    resourceId: res.data.list[0].files[0].resourceId,
					}
					if(first){
						this.$emit('value-change', data)
					}
			        // self.listData = res.data;
			        // self.showListData = res.data;
			    })
			},
			change(index) {
				this.current = index;
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		}
	}
</script>

<style lang="scss" scoped>
	.discuss-btn {
		text-align: right!important;
	}
	.kms-course-log {
		padding-left: 50rpx;
	}
	.log-title {
		width: 60%;
		font-size: 38rpx;
		font-weight: 600;
		float: left;
	}
	.log-title-studying{
		color: #0066CC;
	}
	.study-status {
		font-size: 12px;
		color: #999999;
	}
	.custom-style {
		color: #606266;
		width: 20rpx;
		line-height: 10rpx;
	}
	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24rpx;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
	}
	.timeLong {
		width: 260px;
		overflow: hidden;       //这个是设置隐藏的。还有其他的，例如scroll，是超出固定长度，底部显示滚动条的。
		text-overflow: ellipsis;   //这个就是设置直接隐藏掉文字，还是显示...的。当前是显示省略号。直接省略是clip
		display: inline-block;     //根据不同标签display值，有的不用加。
		white-space: nowrap;/**不换行**/
	}
	.timeLong1 {
		// float: right;
		display:inline-block;
		color: #999999;
		font-size: 12px;
		position: absolute;
		top: 50%;
		right: 0;
		transform: translateY(-50%);
	}
	.wrap {
			padding: 24rpx;
		}
	
		.u-row {
			margin: 10rpx 0;
		}
	
		.demo-layout {
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 8rpx;
		}
	
		.bg-purple {
			background: #d3dce6;
		}
	
		.bg-purple-light {
			background: #e5e9f2;
		}
	
		.bg-purple-dark {
			background: #99a9bf;
		}
		.log-unit{
			font-size: 35rpx;
			font-weight: 600;
		}
	.status-round{
		width: 10px;
		height: 10px;
		background-color: #0066CC;
		border-radius: 50%;
		margin: 50% auto;
		transform: translateY(-50%);
	}
	.not-learn{
		background-color: #FF3333;
	}
	.learning{
		background-color: #F29100;
	}
	.end-learn{
		background-color: #008A00;
	}
</style>
